import React from 'react'
import {Form, Modal, Radio, Row, Tag} from 'antd'
import {FormattedMessage} from 'react-intl'
import {TwsReactMarkdownPreview} from 'tws-antd'

const RadioGroup = Radio.Group

const PreviewModal = ({quiz,closeModal,visible}) => {
  return (
    <Modal
      title={<FormattedMessage id='预览' />}
      visible={visible}
      footer={null}
      onCancel={closeModal}
      width={1000}
    >
    <Row>
      <Form.Item  label={<FormattedMessage id='标签' />}>
        <span>{quiz.tags.map(tag=><Tag>{tag.name}</Tag>)}</span>
      </Form.Item>
      <Form.Item  label={<FormattedMessage id='描述'/>}>
        <TwsReactMarkdownPreview source={quiz.description}/>
      </Form.Item>
      <Form.Item  label={<FormattedMessage id='选项'/>}>
        <RadioGroup>
          {(quiz.choices||[]).map((option, index) => {
            return (
              <p><Radio value={`${index}`} key={index} disabled>
                <span>{option.choice}</span>
              </Radio>
              </p>
            )
          })}
        </RadioGroup>
      </Form.Item>
    </Row>
    </Modal>)
}

export default PreviewModal
